<template>
  <div class="rank">
    <div class="rand_td">
      <div class="c_title">
        <div class="inf">
          <slot name="title"> 热门榜单 </slot>

          <span class="tag">
            <slot name="new"></slot>
          </span>
          <span class="tag_inf"> 根据销量、搜索、好评等综合得出 </span>
        </div>
        <div class="go" @click="goMore">更多<i></i></div>
      </div>
    </div>
    <div class="rand_dd">
      <ul class="rand_com">
        <li v-for="(item, index) in likeInfo" :key="item.id"
            @click="goDetail(item.id)"
        >
          <a>
            <img :src="item.image" alt="" />
            <div class="des">{{ item.store_name }}</div>
            <p class="price">
              ￥<span>{{ item.price }}</span>
            </p>
            <div
              :class="[
                'top',
                index == 0 ? 'tbg1' : '',
                index == 1 ? 'tbg2' : '',
                index == 2 ? 'tbg3' : '',
              ]"
            ></div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import CTitle from "@/components/ctitle/CTitle.vue";
export default {
  data() {
    return {
      index: 0,
    };
  },
  props: {
    likeInfo: {
      type: Array,
    },
  },
  components: {
    CTitle,
  },
  methods: {
    goDetail(id) {
      this.$router.push("/detail/" + id);
    },

    goMore(){
      let num = 2
      this.$router.push("/hot_new_goods/"+num);
    
    }
  },
};
</script>

<style lang="scss" scoped>
.rank {
  background-color: #fff;
}
.rand_td {
  width: 100%;
  height: 108px;
  background: url(../../../assets/icon/index/rank_bg.png) no-repeat;
  background-size: 100% 100%;
}
.rand_dd {
  padding: 0 15px 12px;
  margin-top: -60px;
  .rand_com {
    width: 100%;
    border-radius: 15px;
    background-color: #fff;
    display: flex;
    padding: 10px 11px;
    justify-content: space-between;
    box-shadow: 0 2px 10px 1px #aaa;
    li {
      a {
        width: 100px;
        display: block;
        position: relative;
        > img {
          display: block;
          width: 100px;
          height: 100px;
          border-radius: 8px;
        }
        .des {
          width: 100%;
          font-size: 13px;
          color: #282828;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .price {
          margin-top: 5px;
          font-size: 12px;
          color: #fc4141;
          span {
            font-size: 14px;
          }
        }
        .top {
          position: absolute;
          top: -2px;
          left: -2px;
          width: 25px;
          height: 25px;
          // background-color: pink;
          background-size: 100% 100%;
        }
      }
    }
  }
}
.tbg1 {
  background: url(../../../assets/icon/index/top_one.png) no-repeat;
}
.tbg2 {
  background: url(../../../assets/icon/index/top_two.png) no-repeat;
}
.tbg3 {
  background: url(../../../assets/icon/index/top_three.png) no-repeat;
}

.c_title {
  width: 100%;
  padding: 17px 15px 0;
  display: flex;
  justify-content: space-between;
  .inf {
    font-size: 15px;
    color: #fff;
    width: 300px;
    font-weight: 700;
    position: relative;
    .tag {
      position: absolute;
      top: 1px;
      left: 66px;
      font-size: 12px;
      font-weight: 700;
      color: #fff;
    }
    .tag_inf {
      font-size: 12px;
      color: #fff;
    }
  }
  .go {
    font-size: 13px;
    color: #fff;
    i {
      display: inline-block;
      vertical-align: top;
      width: 18px;
      height: 18px;
      background: url(../../../assets/icon/common/white_right_arrow.svg)
        no-repeat;
      background-size: 100% 100%;
      margin-left: -6px;
    }
  }
}
</style>
